<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="shortcut icon" href="" />
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/release.css" />


</head>

<body>
    <!-- nav栏 -->
    <header>
        <div>
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li><a href="">课程</a></li>
                <li><a href="../html/test.html">课堂测试</a></li>
                <li><a href="">发布留言</a></li>
                <li><a href="../html/random.html">抽奖活动</a></li>

            </ul>

        </div>
        <div class="form">
            <input type="button" class="btn" />
            <a href="../html/logon.html">登录</a>
            <a href="../html/post.html" style="margin-left: 15px;">注册</a>
        </div>

    </header>
    <!-- 发布区域 -->
    <main style="position: relative;">
        <div>

            <textarea placeholder="请开始输入内容"></textarea>
            <button class="button">发送</button>
            <ul class="ul">
                <!-- <li >5203<span>删除</span></li> -->

            </ul>

        </div>

    </main>
    <script>
        var t = document.querySelector("textarea")
        var ul = document.querySelector(".ul")
        var btn = document.querySelector(".button")
        btn.onclick = function () {
            if (t.value !== "") {
                var li = document.createElement("li")
                var fist = document.querySelectorAll(".ul li")[0]
                li.innerHTML = t.value + "<span>删除</span>"
                ul.insertBefore(li, fist)
                t.value = "";

                var span = document.querySelectorAll(' .ul li span');

                for (var i = 0; i < span.length; i++) {
                    span[i].onclick = function () {
                        this.parentNode.remove();
                    }
                }
            } else(
                alert("没有内容")
            )

        }
    </script>
</body>

</html>